﻿define(function (require, exports, module) {
    var Canvas = require('util/canvas');
    var Config = require('util/config');
    var ImageStorage = require('util/imageStorage');
    var iCharacterManager = require('newRole/iCharacterManager');
    var Character = require('character');

    var m_selectedCharacterImage;
    var m_backCallback;
    var m_charactersOptions;
    var m_characters;
    var m_isLeft;

    exports.load = function (isLeft) {
        m_isLeft = isLeft;
        m_charactersOptions = {
            '101': { x: 200, y: 310, colorId: Config.character.color.YELLOW },
            '102': { x: 108, y: 273, colorId: Config.character.color.YELLOW },
            '103': { x: 247, y: 407, colorId: Config.character.color.YELLOW },
            '104': { x: 128, y: 381, colorId: Config.character.color.RED },
            '105': { x: 138, y: 174, colorId: Config.character.color.RED },
            '106': { x: 343, y: 393, colorId: Config.character.color.YELLOW },
            '107': { x: 477, y: 379, colorId: Config.character.color.GREEN },
            '108': { x: 415, y: 322, colorId: Config.character.color.GREEN },
            '109': { x: 379, y: 239, colorId: Config.character.color.GOLD },
            '110': { x: 296, y: 209, colorId: Config.character.color.YELLOW },
            '111': { x: 380, y: 154, colorId: Config.character.color.RED },
            '112': { x: 241, y: 125, colorId: Config.character.color.GOLD }
        };
        m_characters = {};

        this.reloadAsync().start();
    };

    exports.reloadAsync = eval(Wind.compile('async', function () {
        $await(iCharacterManager.renderAsync());

        getBackToRoleManager().on('click', function () {
            ani.stop();
            m_backCallback();
        });

        getModifyGroup().hide();
        getModifyGroup().getLayer().draw();

        Canvas.get('#decide').on('click', function () {
            ani.stop();
            var Role = require('newRole/role');
            Role.setBackCallback(function () {
                exports.reloadAsync().start();
            });
            Role.loadCreate(m_characters[m_selectedCharacterImage.getId()]);
        });
        Canvas.get('#changeColor').on('click', function () {
            m_characters[m_selectedCharacterImage.getId()].changeColor();
        });
        Canvas.get('#changeDirection').on('click', function () {
            m_characters[m_selectedCharacterImage.getId()].steering();
        });
        Canvas.get('#cancel').on('click', function () {
            getModifyGroup().hide();
            getBackToRoleManager().show();
            getTipText().setText(Config.words.SELECT_A_CHARACTER);

            m_characters[m_selectedCharacterImage.getId()].stand();
            Canvas.removeNodeBoxAnimation(m_selectedCharacterImage);
            setCharacterMouseOverAndOutEvent(m_selectedCharacterImage);
        });

        var characterImages = getCharacterImages();
        var ani = new Kinetic.Animation(function (frame) {
            $.each(characterImages, function () {
                m_renderCharacterActionAsync(frame.time, this).start();
            });
        }, characterImages[0].getLayer());

        for (var i = 0, image; image = characterImages[i]; i++) {
            var characterId = image.getId();
            var defaultOptions = m_charactersOptions[characterId];
            var options = $.extend({
                isLeft: m_isLeft, characterId: characterId, handId: Config.character.hand.EMPTY, directionId: Config.character.direction.SOUTH
            }, defaultOptions);

            m_characters[characterId] = new Character(options);
        }
        ani.start();

        showCharacters();

    }));

    var m_renderCharacterActionAsync = eval(Wind.compile('async', function (time, image) {
        var index = Math.floor(time / 150);
        var characterId = image.getId();
        var options = m_charactersOptions[characterId];
        var character = m_characters[characterId];
        var img = $await(ImageStorage.getAsync(character.actionPaths[index % character.action.count]));
        img == image.getImage() || image.setAttrs({
            x: options.x - img.width / 2, y: options.y - img.height, width: img.width, height: img.height, image: img
        });
    }));

    function showCharacters() {
        $.each(getCharacterImages(), function () {
            setCharacterMouseOverAndOutEvent(this);
            this.on('click', function () {
                m_selectedCharacterImage = this;
                this.off('mouseover mouseout');
                getTipText().setText('');
                getBackToRoleManager().hide();
                getModifyGroup().show();
            });
        });
    };

    function setCharacterMouseOverAndOutEvent(image) {
        Canvas.setNodeWithBoxAnimation(image);
        image.on('mouseover', function () {
            m_characters[this.getId()].move();
        });
        image.on('mouseout', function () {
            m_characters[this.getId()].stand();
        });
    };

    function getTipText() { return Canvas.get('#tipText')[0]; }

    function getBackToRoleManager() { return Canvas.get('#backToRoleManager')[0]; }

    function getModifyGroup() { return Canvas.get('#modifyCharacterGroup')[0]; }

    function getCharacterImages() { return Canvas.get('.character'); }

    exports.setBackCallback = function (callback) {
        m_backCallback = callback;
    };
});